一個頁面被 CSS 渲染出來後, 其 Layout 扮演很重要的角色, 將影響使用者會不會繼續訪問網頁, 其訪問性是不是友善的。
先來看看一個 layout 和可訪問性糟糕的網頁, http://www.gatesnfences.com/
當你進入這個網頁後, 是不是也覺得排版很亂, 糟糕的 HTML tags 和 layout, 讓你找不到重點呢? 那麼你應該知道 layout 的重要性了吧!
另外, 這邊有個有趣的影片大家有興趣可以看看, 影片提供各種不同的研究方法來驗證頁面 layout 的可訪問性: https://www.youtube.com/watch?v=07efSFKC8XY
Layout Techniques in CSS:
<div>, <p>, <h1>, <h2>, ….<h6>, <header>, <footer> <ul>, <li>
block-level elements 都是以每新的 row 為規則來做垂直排列, 每個不同的 block element 會從新的一行開始。
<p style="border: 1px dotted red">p block!</p>
<div style="border: 1px solid green">div block!</div>
<h1>h1 block!</h1>
有注意到一點是, block-level element 的 width (寬度) 預設是會填滿整個頁面的寬度 (父層寬度)。
block-level elements 通常都會包含 inline elements, inline elements 和 block elements 不同, 不會要求要從新的一行 (row) 開始, 如果 block 的寬度 (width) 都還足夠, inline element 就可以一直包進去。
example: <span> → inline element
<p>What is inline element? <span style="border: 1px dashed blue">This is inline span!</span> Ok, I got it.</p>
讓我們來練習一下如何繪出以下指定規則的 border model
boxes.css
body {
margin: 0;
padding: 0;
}
#inner-box {
/* use "border" to set all the border styles in one line */
/* border: 50px solid pink; */
border-width: 50px;
border-style: solid;
border-color: pink;
background-color: salmon;
height: 200px;
width: 200px;
}
#outer-box {
background-color: teal;
padding: 50px;
height: 300px;
width: 300px;
}
boxes.html
<!DOCTYPE html>
<html>
<head>
<title>Boxes Exercise</title>
<link href="boxes.css" rel="stylesheet">
</head>
<body>
<div id="outer-box">
<div id="inner-box"></div>
</div>
</body>
</html>
對齊 塊級內容的 CSS 屬性。Flexbox 可以幫助我們把 layout 水平垂直排版, 調整高和寬以適應不同尺寸的顯示設備。在 flexbox 中, flex-direction 的不同會決定主軸 (main axis) 和切軸 (cross axis) 的方向。
flex-direction → column: 水平 (inline) 稱作切軸 (cross axis), 垂直 (block) 稱作主軸 (main axis)。flex-direction → row: 水平 (inline) 稱作主軸 (main axis), 垂直 (block) 稱作切軸 (cross axis)。
Design a flexbox:
需要把 display 屬性設定為
display: flex; 或 display: inline-flex;
定義兩種類型的內容: container 裡的各種屬性決定了其 item 的佈局方式 (how the items are layed out)
畫了一個圖來表示 flex container 和 flex item 的關係: 黃色的部分可以想成是 container, 而裡面三個紫色的方框則是 items。三個 items 排列的方式在這邊是 row 排列, 水平從左到右。
Flex container: 父塊元素, 包括 flex item 的父元素
<div style="display:flex; flex-direction:row">
// flex item
</div>
Flex item: 任何直接嵌套在 flex container 內的東西都變成了 flex item
<div styl="display:flex; flex-direction:row">
<div>flex item say hi</div>
<div>flex item say hihi</div>
<div>flex item say hihihi</div>
</div>
iThome鐵人賽
看影片追技術